<template>
  <view class="lottery-container">
	<view style="lottery-lucky-wrap">
		<LuckyGrid ref="myLucky"
		  :buttons="buttons"
		  :blocks="blocks"
		  :activeStyle="activeStyle"
		  :defaultStyle="defaultStyle"
		  :prizes="prizes"
		  @start="startCallBack"
		  @end="endCallBack" />
	</view>
  </view>
</template>

<script>
  const prizeImg = {
	src: 'https://unpkg.com/buuing@0.0.1/demo/prize.png',
	width: '50%',
	top: '25%'
  }
  const cellImg = {
	src: 'https://unpkg.com/buuing@0.0.1/demo/cell-80.png',
	width: '100%',
	height: '100%'
  }
  import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格
  export default {
    components: { LuckyGrid  },
    data () {
      return {
        blocks: [
              { padding: '10px', background: '#FEE36A' },
              { padding: '10px', background: '#fdc854' },
        ],
		defaultStyle: {
		  background: '#ffefd6',
		   speed: 10
		},
		activeStyle: {
		  background: '#af6d3e'
		},
		prizes: [
		  { x: 0, y: 0 , imgs: [ prizeImg] },
		  { x: 1, y: 0 , imgs: [prizeImg] },
		  { x: 2, y: 0 , imgs: [prizeImg] },
		  { x: 2, y: 1 , imgs: [prizeImg] },
		  { x: 2, y: 2 , imgs: [prizeImg] },
		  { x: 1, y: 2 , imgs: [prizeImg] },
		  { x: 0, y: 2 , imgs: [prizeImg] },
		  { x: 0, y: 1 , imgs: [prizeImg] },
		],
		buttons: [
		  {
			x: 1, y: 1,
			background: 'rgba(0,0,0,0)',
			imgs: [{
			  src: 'https://unpkg.com/buuing@0.0.1/demo/grid-btn.png',
			  width: '100%',
			  height: '100%',
			}],
		  },
		],
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
		  // 开始游戏
		  this.$refs.myLucky.play()
		  // 使用定时器模拟接口
		  setTimeout(() => {
			// 结束游戏, 并抽第0号奖品
			this.$refs.myLucky.stop(0)
		  }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>
<style lang="scss">
	page{
		height: 100%;
	}
	.lottery-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-image: url(../../static/imgs/bg.png);
		background-size: 100% 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		.lottery-lucky-wrap{
			
		}
	}
</style>